<template>
  <div>
    <div style="display: flex; flex-direction: column; row-gap: 8px;">
      <div style="display: flex; align-items: center; column-gap: 10px;">
        模式
        <RadioGroup v-model:value="mode" type="button">
          <Radio value="bubble">气泡</Radio>
          <Radio value="noBubble">非气泡</Radio>
          <Radio value="userBubble">用户会话气泡</Radio>
        </RadioGroup>
      </div>
      <div style="display: flex; align-items: center; column-gap: 10px;">
        会话对齐方式
        <RadioGroup v-model:value="align" type="button">
          <Radio value="leftRight">左右分布</Radio>
          <Radio value="leftAlign">左对齐</Radio>
        </RadioGroup>
      </div>
    </div>
    <Chat
      :key="align + mode"
      :align="align"
      :mode="mode"
      :uploadProps="uploadProps"
      :style="commonOuterStyle"
      :chats="message"
      :roleConfig="roleInfo"
      @chatsChange="onChatsChange"
      @messageSend="onMessageSend"
      @messageReset="onMessageReset"
      :uploadTipProps="uploadTipProps"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Chat, Radio, RadioGroup } from '@kousum/semi-ui-vue';

const defaultMessage = [
  {
    role: 'system',
    id: '1',
    createAt: 1715676751919,
    content: "Hello, I'm your AI assistant.",
  },
  {
    role: 'user',
    id: '2',
    createAt: 1715676751919,
    content: "给一个 Semi Design 的 Button 组件的使用示例",
  },
  {
    role: 'assistant',
    id: '3',
    createAt: 1715676751919,
    content: "以下是一个 Semi 代码的使用示例：\n\`\`\`jsx \nimport React from 'react';\nimport { Button } from '@kousum/semi-ui-vue';\n\nconst MyComponent = () => {\n  return (\n    <Button>Click me</Button>\n );\n};\nexport default MyComponent;\n\`\`\`\n",
  }
];

const roleInfo = {
  user: {
    name: 'User',
    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png'
  },
  assistant: {
    name: 'Assistant',
    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
  },
  system: {
    name: 'System',
    avatar: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png'
  }
};

const commonOuterStyle = {
  border: '1px solid var(--semi-color-border)',
  borderRadius: '16px',
  margin: '8px 16px',
  height: '550px',
};

let id = 0;

function getId() {
  return `id-${id++}`;
}

const uploadProps = { action: 'https://api.semi.design/upload' };
const uploadTipProps = { content: '自定义上传按钮提示信息' };

const message = ref(defaultMessage);
const mode = ref('bubble');
const align = ref('leftRight');

const onMessageSend = (content, attachment) => {
  const newAssistantMessage = {
    role: 'assistant',
    id: getId(),
    createAt: Date.now(),
    content: "这是一条 mock 回复信息",
  };
  setTimeout(() => {
    message.value = [...message.value, newAssistantMessage];
  }, 200);
};

const onChatsChange = (chats) => {
  message.value = chats;
};

const onMessageReset = (e) => {
  setTimeout(() => {
    const lastMessage = message.value[message.value.length - 1];
    const newLastMessage = {
      ...lastMessage,
      status: 'complete',
      content: 'This is a mock reset message.',
    };
    message.value = [...message.value.slice(0, -1), newLastMessage];
  }, 200);
};
</script>